<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>

    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
        canvas.style.border = "1px solid #555";

        var ctx = canvas.getContext("2d");


        function drawGrid (stepX , stepY , lineWidth, color){
            ctx.save();
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;

            for(var i = stepY + 0.5 ; i < ctx.canvas.height ; i+=stepY){
                ctx.beginPath();
                ctx.moveTo(0,i);
                ctx.lineTo(ctx.canvas.width , i);
                ctx.stroke();
            }

            for(var j = stepX + 0.5 ; j < ctx.canvas.width ; j+=stepX){
                ctx.beginPath();
                ctx.moveTo(j , 0);
                ctx.lineTo(j , ctx.canvas.height);
                ctx.stroke();
            }

            ctx.restore();
        }

        drawGrid(10,10,1,'grey');
    }



</script>
</body>
</html>